<template>
    <view class="customer-list-item" @click="goDetail">
        <view class="header">
            <view class="cut-cut">
                <view class="cut-bg">
                    <image class="vip-lv-img" src="/static/img/icon_vip.png"></image>{{ item.leveIName }}
                </view>
            </view>
            <view class="code">{{ item.Code }}</view>
        </view>
        <view class="storeName">
            {{ item.StoreName }}
        </view>
        <view class="address">
            <image src="/static/img/icon_addr.png" mode="aspectFill" style="width: 22px; height: 22px;"></image>
            <view class="info">地址：{{ item.Address }}</view>
        </view>
        <view class="contactName">
            <view>联系人：{{ item.ContactName }} {{ item.ContactTel }}</view>
            <view style="color: #4070FF; display: flex; align-items: center;" @click.stop="ywycall(item.ContactTel)">
                <image class="vip-lv-img" src="/static/icon/icon_order_tel.png"
                    style="width: 20px; height: 20px; margin-right: 10rpx;">
                </image>立即联系
            </view>
        </view>
        <view class="workerName">
            业务员：{{ item.WorkerName }}
        </view>
        <view class="btn-group">
            <button v-if="item.StatusName == '正常状态'" class="btn btn-nullify" @click.stop="valetFn">代下单</button>
            <button v-if="item.StatusName == '禁用'" class="btn btn-default">已禁用</button>
            <button v-if="item.StatusName != '禁用' && item.StatusName != '正常状态'" class="btn btn-default">未开通</button>
        </view>
    </view>
</template>

<script>
import easyTag from "@/components/easy/easy-tag.vue"
export default {
    components: {
        easyTag,
    },
    props: {
        item: {
            type: Object,
            default: () => { },
        },
        index: {
            type: Number,
            default: 0,
        },
        selectType: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            isSelect: true,
        }
    },
    created() {
        this.isSelect = this.selectType
    },
    mounted() { },
    methods: {
        ywycall(tell) {
            uni.makePhoneCall({
                phoneNumber: tell,
            })
        },
        goDetail() {
            if (this.isSelect) {
                switch (this.selectType) {
                    case "1":
                        //代退货
                        this.easyGoTo("/pages_shop/packet/return/billList?userId=" + this.item.StoreUserId)
                        break
                    case "2":
                        //代下单
                        this.valetFn()
                        break
                    case "3":
                        //报价下单
                        this.easyGoTo(
                            "/pages/customer/offer-order?valetUserId=" +
                            this.item.StoreUserId +
                            "&valetUserInfo=" +
                            encodeURIComponent(JSON.stringify(this.item)),
                        )
                        break
                    case "4":
                        //一客一价
                        this.easyGoTo(
                            "/pages/private/edit?valetUserId=" +
                            this.item.StoreUserId +
                            "&valetUserInfo=" +
                            encodeURIComponent(JSON.stringify(this.item)),
                        )
                        break
                    default:
                        break
                }
                return
            }
            this.easyGoTo(
                "/pages/customer/detail?StoreId=" + this.item.StoreId + "&StoreUserId=" + this.item.StoreUserId,
            )
        },
        valetFn() {
            if (this.item.Status != 1) {
                this.easyToast("当前客户非正常状态，无法下单")
                return
            }
            //this.easyGoTo('/pages/product/index-valet?valetUserId='+this.item.StoreUserId + "&valetUserInfo="+ encodeURIComponent(JSON.stringify(this.item)))
            this.easyGoTo(
                "/pages/customer/replace-order?valetUserId=" +
                this.item.StoreUserId +
                "&valetUserInfo=" +
                encodeURIComponent(JSON.stringify(this.item)),
            )
        },
    },
}
</script>

<style lang="scss">
.customer-list-item {
    min-height: 122rpx;
    padding: $app-page-padding;
    background: $color-white;
    margin: 24rpx;
    border-radius: 16rpx;

    .header {
        display: flex;
        align-items: center;

        .code {
            background: #FFF2F0;
            font-size: 20rpx;
            color: $app-color-main;
            padding: 4rpx 8rpx;
            margin-left: 12rpx;
            font-weight: 500;
            border-radius: 12rpx;
        }
    }

    .cut-cut {
        width: 100rpx;
        height: 30rpx;
        background: #444444;
        transform: skew(-25deg);
        padding: 0 15rpx 0 0;
        display: flex;
        align-items: center;
        margin-left: 36rpx;

        .cut-bg {
            display: flex;
            align-items: center;
            transform: skew(25deg);
            font-size: 20rpx;
            color: #fff;

            image {
                width: 44rpx;
                height: 44rpx;
                display: block;
                margin-left: -15px;
            }
        }
    }

    .storeName {
        font-size: 28rpx;
        margin: 12rpx 0;
    }

    .address {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;

        .info {
            margin-left: 12rpx;
            font-size: 24rpx;
            color: #999;
        }
    }

    .contactName {
        display: flex;
        justify-content: space-between;
        background: #F2F3F5;
        padding: 18rpx;
        border-radius: 12rpx;
        font-size: 26rpx;
        margin-bottom: 12px;
    }

    .workerName {
        font-size: 24rpx;
        margin-bottom: 12rpx;
    }

    .btn-group {
        display: flex;
        justify-content: flex-end
    }

    .btn {
        margin: 0 0 0 24rpx;
        height: 64rpx;
        background: #ffffff;
        border-radius: 38rpx;
        border: 1rpx solid $app-color-main;
        font-size: 28rpx;
        color: $app-color-main;
        padding: 0 30rpx;
    }

    .btn-nullify {
        border-color: $color-main;
        color: red;
    }

    .btn-default {
        border-color: #999;
        color: #999;
    }
}
</style>
